<template>
  <div class="bottom-player" :class="{ 'has-song': song }">
    <div class="player-content" @click="openPlayer">
      <div class="song-info" v-if="song">
        <div class="song-name">{{ song.name }}</div>
        <div class="song-artist">{{ song.artist }}</div>
      </div>
      <div class="no-song" v-else>
        暂无播放歌曲
      </div>
      
      <div class="player-controls" v-if="song">
        <div class="time-display">
          {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
        </div>
        <button class="control-btn" @click.stop="togglePlay">
          <i :class="isPlaying ? 'fas fa-pause' : 'fas fa-play'"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BottomPlayer',
  props: {
    song: Object,
    isPlaying: Boolean,
    currentTime: Number,
    duration: Number
  },
  emits: ['toggle-play', 'open-player'],
  setup(props, { emit }) {
    const togglePlay = () => {
      emit('toggle-play')
    }
    
    const openPlayer = () => {
      if (props.song) {
        emit('open-player')
      }
    }
    
    const formatTime = (time) => {
      if (isNaN(time)) return '0:00'
      
      const minutes = Math.floor(time / 60)
      const seconds = Math.floor(time % 60)
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
    }
    
    return {
      togglePlay,
      openPlayer,
      formatTime
    }
  }
}
</script>

<style scoped>
.bottom-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #c62828;
  color: white;
  padding: 10px 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.player-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.song-info {
  flex: 1;
}

.song-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.song-artist {
  font-size: 12px;
  opacity: 0.8;
}

.no-song {
  font-size: 14px;
  opacity: 0.7;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.time-display {
  font-size: 12px;
  opacity: 0.8;
}

.control-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>
